<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="/lib/layui-v2.5.6/layui/css/layui.css"/>
		<title>生成客户确认单</title>
	</head>
	<style>
		body{
			background-color:#C2C2C2;
		}
		.layui-form{
			width: 25%;
			background-color: #C2C2C2;
			position: absolute;
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		
	</style>
	<body>
		<form class="layui-form" action="" lay-filter="dataForm">
			
			<input type="hidden" id="idhidden" name="id" class="layui-input"/>
			
			<div class="layui-form-item">
				<label class="layui-form-label">用户名:</label>
				<div class="layui-input-block">
					<input type="text" name="userName" autocomplete="off" lay-verify="required|username" placeholder="请输入客户姓名" class="layui-input">
				</div>
			</div>
			  
			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-block">
					<input type="tel" name="userMobilephone" lay-verify="required|phone" placeholder="请输入客户手机号" autocomplete="off" class="layui-input">
				</div>
			</div>
		  
		    <div class="layui-form-item">
				<div class="layui-input-block">
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					<button class="layui-btn" lay-submit="" lay-filter="confirm">确认</button>
				</div>
		    </div>	
		    
		    <div class="layui-form-item">
				<hr>
			</div>
			
		    <div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="btn3">生成确认单</button>
				</div>
			</div>
		</form>
		
		<script src="/lib/layui-v2.5.6/layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(['element','jquery','layer','form'],function(){
				var $=layui.jquery;
				var element=layui.element;
				var layer=layui.layer;
				var form=layui.form;
				
        		//拿到当前页面的链接地址
            	var val = window.location.href;
            	// 拿到链接地址传递的id
            	var id = val.split("?")[1].split("=")[1];
            	if(null == id || undefined == id){
            		alert("系统出错,请重新选择");
            		window.location.go(-1);
            	}
            	$("#idhidden").val(id);
				//监听提交事件 submit提交 
				form.on('submit(confirm)', function(data){
					console.log(data.elem) 			//被执行事件的元素DOM对象，一般为button对象
				  	console.log(data.form) 			//被执行提交的form对象，一般在存在form标签时才会返回
				  	console.log(data.field) 		//当前容器的全部表单字段，名值对形式：{name: value}
				  	//异步提交 需要用ajax提交
      				$.ajax({
          				type:"get",
          				url:"http://localhost:8080/order/recOrder.do",
          				data:{
          					"repId":data.field.id,
          					"userName":data.field.userName,
          					"userMobilephone":data.field.userMobilephone
          				},
          				dataType:"json",
          				success:function(response){
          					if(response.status == 0){
          						layer.msg("用户信息添加成功");
          					}else if(response.status == 0){
          						layer.msg("用户信息添加失败");
          						window.location.reload();
          					}
          				}
          			});
				    return false; 				//阻止表单跳转/重复提交。如果需要表单跳转，去掉这段即可。
				});
				
				$("#btn3").click(function(){
//           			$.ajax({
//           				type:"get",
//           				url:"http://localhost:8080/order/print",
//           				success:function(){
//           					console.log("print");
//           				}
//           			});
          			//window.setTimeout(2000);
					layer.open({
						type:2,						//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 
						title:"提示",				//标题
						content:"http://localhost:8080/print",	//内容 type=0为内容
						skin:"layui-layer-molv",	//皮肤
						area:["500px","600px"],				//宽高
						offset:"auto",				//坐标
						icon:1,						//仅对type=0有效
						btnAlign:'c',					//按钮对齐方式
						closeBtn:1, 					//设置关闭按钮样式 默认1
						shade:[0.8,'#393D49'], 			//遮罩 点击后背景透明度及颜色
						shadeClose:true, 				//是否点击遮罩关闭弹出层 即点击弹出层之外的范围是否会关闭弹出层
						anim:0, 						//弹出动画 默认0
						//maxmin:true,					//设置弹出层最大最小化效果 type=1和2有效
						success: function(layero, index){	//layero弹出层对象 弹出层index索引
						    //console.log(layero, index);
						}
					});
				});

			})
		</script>
	</body>
</html>
